<template>
	<div>
		<el-empty description="你还没有发布文章,快去更新博客吧" v-if="isShowEmpty"></el-empty>
		<div v-if="isShowArticle">
			<div v-for="item in article" :key="item.articleId"
				style="border:1px black solid;margin:10px;position: relative;overflow:auto" class="infinite-list">
				<div style="position:absolute;top:20px;left:15px;color: darkgray;">
				</div>
				<div style="text-align:center">
					<div>
						<h1>{{ item.title }}</h1>
					</div>
					<div style="height:30px;margin-bottom:30px">
						<el-avatar :src="item.avatar" size="small"></el-avatar>
						<h3 style="display:inline-block;line-height:30px;">{{ item.username }}</h3>
					</div>
				</div>
				<div class="content">
					<div class="text more" ref="more">
						占位
					</div>
					<div class="text">
						<div :class="{ 'retract': item.status }"
							:style="{ 'max-height': item.status ? textHeight : '' }" ref="textContainer">
							<h4 v-html="item.content"></h4>
						</div>
						<div class="btn">
							<p v-if="item.status" @click="item.status = false">展开</p>
							<p v-if="item.status == false" @click="item.status = true">收起</p>
						</div>
					</div>
				</div>
				<div>
					<el-badge is-dot class="item">
						<el-button size="small" @click="expansion(item.articleId)">评论</el-button>
					</el-badge>
					<el-badge is-dot class="item">
						<el-button size="small" @click="expansion(item.articleId)">回复</el-button>
					</el-badge>
				</div>

				<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
			</div>

		</div>
		<commentArticle ref="isShowCommentArticle" />
	</div>
</template>

<script>
import { getToken, getUserName, getUserId, getAvatar } from '@/utils/auth'
import { Message } from 'element-ui';
import commentArticle from '../component/commentArticle.vue';
import api from '../utils/api'
export default {
	data() {
		return {
			article: [],
			isShowEmpty: false,
			isShowArticle: true,
			avatar: ''
		}
	},
	components: {
		commentArticle
	},
	created() {
		var username = getUserName()
		if (username == "" || username == undefined || username == null) {
			this.getUserInfo()
			this.avatar = getAvatar()
		} if (getUserId != '' || undefined || null) {
			this.getMyArticle(getUserId())
		}

	},
	mounted() {
		this.article.forEach((ele, index) => {
			this.$set(this.article, index, Object.assign({}, ele, { status: null }))
		})
		// DOM 加载完执行
		this.$nextTick(() => {
			setTimeout(() => {
				this.calculateText()
			}, 1000)

		})

		window.onresize = () => {
			this.article.forEach((ele, index) => {
				this.$set(this.article, index, Object.assign({}, ele, { status: null }))
			})
			setTimeout(() => {
				this.calculateText()
			}, 1000)
		}
	},
	methods: {
		expansion(articleId) {
			if (articleId > 0) {
				api.findArticleComment(articleId).then(res => {
					console.log('文章', articleId)
					console.log('自己也', res.data)
					if (res.data.length > 0) {
						this.$refs.isShowCommentArticle.commentList = res.data
						this.$refs.isShowCommentArticle.articleId = articleId
					} else {
						this.$refs.isShowCommentArticle.commentList = null
						this.$refs.isShowCommentArticle.articleId = articleId
						Message({
							type: 'error',
							message: '你的文章暂时还没有评论ovo'
						})
					}
				})
				if (this.$refs.isShowCommentArticle.commentList.length > 0) {
					this.$refs.isShowCommentArticle.drawer = true
				}
			} else {
				this.$message({
					type: 'error',
					message: '查看评论失败'
				})
			}
		},
		calculateText() {
			// 获取一行文字的height 计算当前文字比较列表文字
			let oneHeight = this.$refs.more.scrollHeight
			let twoHeight = oneHeight * 2 || 40
			this.textHeight = `${twoHeight}px`
			let txtDom = this.$refs.textContainer
			for (let i = 0; i < txtDom.length; i++) {
				let curHeight = txtDom[i].offsetHeight
				if (curHeight > twoHeight) {
					this.$set(this.article, i, Object.assign({}, this.article[i], { status: true }))
				} else {
					this.$set(this.article, i, Object.assign({}, this.article[i], { status: null }))
				}
			}
		},
		getMyArticle() {
			let userId = getUserId()
			console.log('我的用户id是', userId)
			api.getMyArticle(userId).then(res => {
				this.article = res.data
				if (res.data.length < 1) {
					this.isShowEmpty = true
					this.isShowArticle = false
				}
				console.log('article是', res.data)
			}).catch(error => {
				console.log(error)
			})
		},
		getUserInfo() {
			this.$store.dispatch('GetInfo').then(() => {
			})
		},
	}
}
</script>

<style lang="less" scoped>
.item {
	margin-left: 15px;
	margin-bottom: 10px;
	margin-top: -10px;
}

.content {
	display: flex;
	margin-bottom: 30px;
}

.text {
	position: relative;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	color: #666666;
}

.retract {
	position: relative;
	overflow: hidden;
}

.retract:after {
	content: '...';
	position: absolute;
	bottom: 0;
	right: 2px;
	width: 25px;
	padding-left: 30px;
	background: linear-gradient(to right, transparent, #fff 45%);
}

.btn {
	position: absolute;
	right: 0;
	bottom: -30px;
	font-size: 14px;
	line-height: 19px;
	letter-spacing: 2px;
	color: #FFAD41;
	cursor: pointer;
}

.more {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2px;
	color: #666666;
	visibility: hidden;
}
</style>